<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/header.css"/>

    <script src="js/checkauth.js"></script>
    <script>
        $(function () {

            //下拉导航的显式与隐藏
            $("#xl").mouseenter(function () {
                $(".xldh").show();
            });
            $("#xl").mouseleave(function () {
                $(".xldh").hide();
            });
            $(".xldh").mouseenter(function () {
                $(".xldh").show();
            });
            $(".xldh").mouseleave(function () {
                $(this).hide();
            });

            //点击购物车
            $(".my-shopping").click(function () {
                //location.assign("shopping.html");
                window.open("shopping.html");
            });
        });
    </script>
</head>
<body>

<!-- 头部start -->
<div class="my-header">
    <p class="my-login">
    <span id="nologin">
        <a href="login.html" target="_parent">请登录</a>
        <a href="reg.html" target="_parent">在线注册</a>
    </span>
    <span id="islogin">
        <a href="#" target="_parent">欢迎您：<span id="currentLoginUsername"></span></a>
        <a href="javascript:void(0);" onclick="doLogout()" target="_self">注销</a>
    </span>
    </p>
    <p class="my-order">
        <a href="index.html" target="_parent">商城首页</a>
        <a href="userOrder.html" target="_parent">我的订单</a>
        <a href="userCenter.html" target="_parent">会员中心</a>
        <a href="admin/login.html" target="_blank">商家后台</a>
        <!--<a href="javascript:;" id="xl">站点导航</a>-->
    </p>
    <!--下拉导航-->
    <div class="xldh"></div>

</div>

<!-- 搜索部分start -->
<div class="layui-container" style="height:100px;z-index:999;">
    <div class="layui-row layui-col-space15">
        <!--显示logo-->
        <div class="layui-col-md2" style="cursor:pointer;"
             onclick="javascript:window.parent.location.href='index.html'">
            <div class="my-logo">
                <span><img src="images/xiaomi_logo.jpg"></span>
            </div>
            <div class="my-logo-font">
                小米商城
            </div>
        </div>

        <!--搜索框-->
        <div class="layui-col-md8" style="">
            <input class="my-search" placeholder="搜索产品关键词" type="text" name="search"/>
            <!--搜索按钮-->
            <div class="my-search-btn">
                <i class="layui-icon layui-icon-search"></i>
            </div>
        </div>

        <div class="layui-col-md2" style="">
            <!--购物车-->
            <div class="my-shopping">
                <span class="layui-icon layui-icon-cart"></span>
                购物车
                <span class="layui-badge" id="my-shopping-num">0</span>
            </div>
            <!--购物车详情-->
            <div class="my-shopping-mess">

            </div>

        </div>
    </div>
</div>
<!-- 搜索部分end -->


</body>

<script>
    layui.use('element', function () {
        var element = layui.element;
    });

    let currentLoginUser = {};
    if (isLogin()) {
        $("#islogin").show();
        $("#nologin").hide();
        currentLoginUser = JSON.parse(localStorage.getItem("currentLoginUser.xiaomimall.com"));
        $("#currentLoginUsername").text(currentLoginUser.username);
        console.log('已登录！');
    } else {
        $("#islogin").hide();
        $("#nologin").show();
        console.log('未登录！');
    }

    function doLogout(){
        localStorage.removeItem("currentLoginUser.xiaomimall.com");
        window.setTimeout("javascript:window.parent.location.href='login.html'", 1000);
    }

    //header部分提前加载商品分类信息，由于这部分不经常变化，建议把这个数据保存到本地缓存里面
    $.ajax({
        url: "https://localhost:8443/xiaomimall/catalog/all",
        type: "GET",
        dataType: "text",
        success: function (resp) {
            let result = JSON.parse(resp);
            if(result.code===200) {
                console.log('获取商品分类信息成功！');
                console.log(result.data);
                //保存到本地缓存
                localStorage.setItem("catalogList", JSON.stringify(result.data))
            }
        }
    });

</script>
</html>
